<template>
	<view>

		<!-- #ifdef APP-PLUS || MP-WEIXIN -->
		<u-navbar title="好友明细" back-icon-color="#000" :is-back="true" title-color="#000"
			:background="{ background:'#ffffff'}" :border-bottom="true"></u-navbar>
		<!-- #endif -->

		<view class="r_list">
			<view class="tabs_wrap">
<!--				<u-tabs :list="tabsRlist" :is-scroll="false" :current="tabsrcurrent" @change="tabsRchange" bar-width="134" active-color="#FF9F06" inactive-color="#999999"></u-tabs>-->
			</view>
			<view class="r_list_title">
				<view v-if="tabsrcurrent == 1">好友昵称</view>
				<view v-if="tabsrcurrent == 0">任务名称</view>
				<view v-if="tabsrcurrent == 1">下单时间</view>
				<view v-if="tabsrcurrent == 0">完成时间</view>
				<view>收入(元)</view>
			</view>

			<view v-if="tabsrcurrent == 0">

				<view class="lanjiazai" v-if="skeletonLoading">
					<view>
						<view class="loading_icon">
							<image :src="BestImgUrl + 'loading.gif'" class="loading_gif"></image>
						</view>
						<view class="tag">加载中...</view>
					</view>
				</view>
				<view v-else>
					<view class="r_list_box" v-for="(itemr,indexr) in haoyouList" :key="indexr">
						<view class="l_2">
							<view class="u_iamge">
								<image :src="itemr.logo"></image>
							</view>
							<view class="u_name">{{itemr.name}}</view>
						</view>
						<view class="l_1">
							<view>{{itemr.create_time}}</view>
						</view>
						<view class="l_4">{{itemr.amount}}元</view>
					</view>
					<view v-if="failTimeOutShow == false">
						<u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="40" margin-bottom="26" />
					</view>
				</view>

			</view>

			<view v-if="tabsrcurrent == 1">

				<view class="lanjiazai" v-if="skeletonLoading2">
					<view>
						<view class="loading_icon">
							<image :src="BestImgUrl + 'loading.gif'" class="loading_gif"></image>
						</view>
						<view class="tag">加载中...</view>
					</view>
				</view>
				<view v-else>
					<view class="r_list_box" v-for="(itemr,indexr) in shouyiList" :key="indexr">
						<view class="l_2">
							<view class="u_iamge">
								<image :src="itemr.avatar"></image>
							</view>
							<view class="u_name">{{itemr.nickname}}</view>
						</view>
						<view class="l_1">
							<view>{{itemr.create_time}}</view>
						</view>
						<view class="l_4">{{itemr.amount}}元</view>
					</view>
					<view v-if="failTimeOutShow == false">
						<u-loadmore icon-type="flower" :status="loadingstatus2" font-size="24" :load-text="loadText"
							margin-top="40" margin-bottom="26" />
					</view>
				</view>



			</view>

			<view v-if="failTimeOutShow == true" class="noData_box">
				<image src="/static/images/Frame33412.png" mode="widthFix"></image>
				<view class="timeOut">
					<view>网络好像出问题了～</view>
					<view @click="refurbish()">立即刷新</view>
				</view>
			</view>

		</view>

	</view>
</template>

<script>
	const app = getApp();
	export default {
		data() {
			return {
				tabsRlist: [{
					name: '任务收益'
				},
				{
					name: '邀请好友'
				}],
				tabsrcurrent: 1,
				haoyouList: [],
				types: 1,
				BestImgUrl: app.globalData.imgurlBwc,
				shouyiList: [],

				skeletonLoading: true,
				skeletonLoading2: false,


				pageSize: 1,
				pageNum: 20,

				failTimeOutShow: false,
				loadingstatus2: 'loading',
				loadingstatus: 'loading',
				loadText: {
					loadmore: '轻轻上拉',
					loading: '加载中...',
					nomore: '没有更多了'
				},
			}
		},
		//下拉刷新
		onPullDownRefresh() {
			let that = this

			// if (this.tabsrcurrent == 0) {
			// 	setTimeout(function() {
			// 		that.pageSize = 1
			// 		that.pageNum = 10
			// 		that.skeletonLoading = true
			// 		that.failTimeOutShow = false
			// 		that.getLeaderboard()
			// 		uni.stopPullDownRefresh();
			// 	}, 1500);
			// } else if (this.tabsrcurrent == 1) {
				setTimeout(function() {
					that.pageSize = 1
					that.pageNum = 10
					that.skeletonLoading2 = true
					that.failTimeOutShow = false
					that.getLeaderboard2()
					uni.stopPullDownRefresh();
				}, 1500);
			// }
		},
		//触底加载
		onReachBottom() {
			let that = this

			// if (this.tabsrcurrent == 0) {
			// 	this.loadingstatus = 'loading';
			// 	setTimeout(function() {
			// 		that.pageSize++;
			// 		that.getLeaderboard()
			// 		uni.hideNavigationBarLoading()
			// 	}, 500);
			// } else if (this.tabsrcurrent == 1) {
				this.loadingstatus2 = 'loading';
				setTimeout(function() {
					that.pageSize++;
					that.getLeaderboard2()
					uni.hideNavigationBarLoading()
				}, 500);
			// }
		},
		onShow() {
			this.getLeaderboard2()
		},
		methods: {
			//刷新重试商家列表
			refurbish() {
				let that = this
				that.pageSize = 1
				that.pageNum = 10

				that.failTimeOutShow = false

				// if (this.tabsrcurrent == 0) {
				// 	that.skeletonLoading = true
				// 	setTimeout(() => {
				// 		that.getLeaderboard()
				// 	}, 2000)
        //
				// } else if (this.tabsrcurrent == 1) {
					that.skeletonLoading2 = true
					setTimeout(() => {
						that.getLeaderboard2()
					}, 2000)
				// }
			},
			getLeaderboard() {
				let that = this
				that.$api.Taskmyincome({
					page: that.pageSize,
					limit: that.pageNum,
				}).then(res => {
					setTimeout(() => {
						if (that.pageSize != 1) {
							if (res.data.result.length != 0) {
								that.loadingstatus = 'loading';
								that.haoyouList = that.haoyouList.concat(res.data.result)
							} else {
								that.loadingstatus = 'nomore'
							}
						} else {
							that.haoyouList = res.data.result
							that.loadingstatus = 'nomore'
						}
						that.failTimeOutShow = false
						that.skeletonLoading = false
					}, 2000)
				}).catch(err => {
					if (!err.data) {
						//不存在就是访问超时或者接口错误
						console.log('请求错误或请求超时', err.errMsg)
						that.haoyouList = []
						that.skeletonLoading = false
						that.failTimeOutShow = true
					} else {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			getLeaderboard2() {
				let that = this
				that.$api.getmyshouyimingxi({
					page: that.pageSize,
					limit: that.pageNum,
					order_by: 'create_time_desc' //默认create_time_desc按收益时间降序、create_time_asc按收益时间升序、amount_desc收益降序、amount_asc收益升序、
				}).then(res => {
					setTimeout(() => {
						if (that.pageSize != 1) {
							if (res.data.result.length != 0) {
								that.loadingstatus2 = 'loading';
								that.shouyiList = that.shouyiList.concat(res.data.result)
							} else {
								that.loadingstatus2 = 'nomore'
							}
						} else {
							that.shouyiList = res.data.result
							that.loadingstatus2 = 'nomore'
						}
						that.failTimeOutShow = false
						that.skeletonLoading2 = false
					}, 2000)
				}).catch(err => {
					if (!err.data) {
						//不存在就是访问超时或者接口错误
						console.log('请求错误或请求超时', err.errMsg)
						that.shouyiList = []
						that.skeletonLoading2 = false
						that.failTimeOutShow = true
					} else {
						uni.showToast({
							title: err.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				})
			},
			tabsRchange(index) {
				let that = this
				that.tabsrcurrent = index;
				if (index == 0) {
					that.types = 1
					that.pageSize = 1
					that.pageNum = 10
					that.haoyouList = []
					that.skeletonLoading = true
					that.getLeaderboard()
				} else if (index == 1) {
					that.types = 2
					that.pageSize = 1
					that.pageNum = 10
					that.shouyiList = []
					that.skeletonLoading2 = true
					that.getLeaderboard2()
				}
			}
		}
	}
</script>

<style lang="scss">
	/deep/ .u-tab-bar {
		position: absolute;
		bottom: -3px !important;
	}

	.lanjiazai {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);
	}

	.noData_box {
		position: absolute;
		top: 50%;
		left: 50%;
		-webkit-transform: translate(-50%, -50%);
		transform: translate(-50%, -50%);

		margin-top: 0;
		text-align: center;
		color: #999;
		text-align: center;

		image {
			width: 280rpx;
		}

		.timeOut {
			font-size: 12px;
			color: #666;
			margin: 0px 0px 7px;
			display: flex;
			align-items: center;
			justify-content: center;

			view:nth-child(2) {
				color: #FF611E;
				padding-left: 10rpx;
			}
		}

		.lijipay {
			width: 30%;
			position: relative;
			margin: 0 auto;

			.u-size-default {
				height: 70rpx !important;
				line-height: 70rpx !important;
			}
		}
	}

	.r_list {
		padding: 0 30rpx;

		.r_list_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 50rpx 0 0 0;

			.l_1 {
				position: relative;
				text-align: center;
				flex: 1;
				font-size: 24rpx;
				color: #666666;
			}

			.l_2 {
				display: flex;
				align-items: center;
				position: relative;
				flex: 1;

				.u_iamge {
					image {
						width: 78rpx;
						height: 78rpx;
						border-radius: 200rpx;
						margin-right: 10rpx;
					}
				}

				.u_name {
					font-weight: bold;
					word-break: break-all;
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
					overflow: hidden;
				}
			}

			.l_3 {
				font-weight: bold;
			}

			.l_4 {
				font-weight: bold;
				color: #FF4910;
				flex: 1;
				text-align: right;
			}
		}

		.r_list_title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 20rpx 0;
			border-top: 1px solid #f3f3f3;
			border-bottom: 1px solid #f3f3f3;

			view:nth-child(1) {
				color: #999999;
				flex: 1;
				text-align: left;
			}
			view:nth-child(2) {
				color: #999999;
				flex: 1;
				text-align: center;
			}
			view:nth-child(3) {
				color: #999999;
				flex: 1;
				text-align: right;
			}
		}
	}

	.r_title {
		text-align: center;
		margin: 30rpx 0 16rpx 0;

		text {
			font-size: 36rpx;
			font-weight: bold;
			color: #FF773A;
		}
	}
</style>